<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板 - 我的博客</title>
    <link rel="stylesheet" href="assets/css/colors.css">
    <link rel="stylesheet" href="assets/css/nav.css">
    <link rel="stylesheet" href="assets/css/layout.css">
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/pages/message.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <header>
        <nav>
            <a href="index.html" class="logo">我的博客</a>
            <div class="nav-container">
                <ul class="nav-links">
                    <li class="nav-dropdown">
                        <a href="index.html">首页</a>
                        <div class="dropdown-content">
                            <a href="start.html">起始页</a>
                            <a href="column.html">专栏</a>
                        </div>
                    </li>
                    <li class="nav-dropdown">
                        <a href="record.html">记录</a>
                        <div class="dropdown-content">
                            <a href="record.html">生活倒影</a>
                            <a href="study.html">学习</a>
                        </div>
                    </li>
                    <li class="nav-dropdown">
                        <a href="album.html">相册</a>
                        <div class="dropdown-content">
                            <a href="album_2024.html">2024</a>
                            <a href="album_2023.html">2023</a>
                            <a href="album_2022.html">2022</a>
                            <a href="album_2021.html">2021</a>
                        </div>
                    </li>
                    <li><a href="message.html" class="active">留言</a></li>
                </ul>
                <div class="nav-auth">
                    <a href="auth.html" class="login-btn">登录</a>
                    <div class="auth-divider"></div>
                    <a href="admin.html" class="admin-btn">管理</a>
                </div>
            </div>
        </nav>
    </header>

    <main>
        <div class="message-header">
            <h1>留言板</h1>
            <p>欢迎在这里留下您的想法和建议</p>
        </div>

        <div class="message-container">
            <!-- 留言表单 -->
            <section class="message-form">
                <h2>发表留言</h2>
                <form id="messageForm">
                    <div class="form-group">
                        <label for="name">昵称</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="content">留言内容</label>
                        <textarea id="content" name="content" rows="5" required></textarea>
                    </div>
                    <button type="submit" class="submit-btn">发表留言</button>
                </form>
            </section>

            <!-- 留言列表 -->
            <section class="message-list">
                <h2>留言列表</h2>
                
                <!-- 回复表单 -->
                <div class="reply-form" style="display: none;">
                    <form class="message-reply-form">
                        <div class="form-group">
                            <textarea placeholder="写下你的回复..." required></textarea>
                        </div>
                        <div class="reply-actions">
                            <button type="submit" class="submit-reply">发送回复</button>
                            <button type="button" class="cancel-reply">取消</button>
                        </div>
                    </form>
                </div>

                <div class="message-items">
                    <!-- 第一条留言 -->
                    <div class="message-item">
                        <div class="message-info">
                            <img src="assets/images/avatar/default.jpg" alt="用户头像" class="avatar">
                            <div class="user-info">
                                <h3>wangmiao</h3>
                                <span class="time">2024-12-13</span>
                            </div>
                        </div>
                        <div class="message-content">
                            <p>不愧是最美博客，太漂亮了。我申请个友链，哈哈。我挂好你的了，下面是我的</p>
                        </div>
                        <div class="message-actions">
                            <button class="reply-btn">
                                <i class="fas fa-reply"></i> 回复
                            </button>
                            <button class="like-btn">
                                <i class="fas fa-heart"></i> 
                                <span>12</span>
                            </button>
                        </div>
                        <!-- 回复内容 -->
                        
                    </div>
                </div>

                <!-- 分页 -->
                <div class="pagination">
                    <button class="page-btn prev">上一页</button>
                    <span class="page-number">1</span>
                    <button class="page-btn next">下一页</button>
                </div>
            </section>
        </div>
    </main>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h4>关于博主</h4>
                <p>一个热爱分享的博主，专注于技术与生活。</p>
            </div>
            <div class="footer-section">
                <h4>联系方式</h4>
                <p>Email: example@email.com</p>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 我的博客. 保留所有权。</p>
        </div>
    </footer>

    <script src="assets/js/nav.js"></script>
    <script src="assets/js/message.js"></script>
</body>
</html> 